<!-- 首页 忘记密码 -->
<template>
    <view class="login-box">
        <view class="top-one-click-login-box">
            <view @click="loginFn(item)" v-for="item in state.loginList" :key="item.id">{{ item.name }}</view>
        </view>
        <view class="top-slogn-box">
            <text>请输入验证码</text>
        </view>
        <view class="top-send-box">
            <text>已发送至 +86 {{ state.phoneNumber }}</text>
        </view>
        <view class="mobile-number">
            <text v-for="item in state.verificationCodeList" @click.stop="state.show = true" :key="item.id">{{ item.val
            }}</text>
        </view>
        <van-number-keyboard :show="state.show" @blur="state.show = false" @input="onInput" @delete="onDelete" />
        <!-- <view class="verification-code verification-code-color">
            验证码错误
        </view> -->
        <view class="verification-code">
            <text @click="resendFn()">重新发送</text>
            <text v-if="state.countdown">（{{ state.countdown }}S）</text>
        </view>
    </view>
</template>

<script setup>
import {
    LoginSMS,// 短信验证码登录
    userOnLine, // 刷新用户登录时间
    checkCode,// 获取登录验证码
    UpdateMobileNumberVerifyCode,// 获取修改手机号验证码
} from "@/api/login"

import {
    UpdateBindMobile,
    UpdateMobileCode, // 验证码校验
    UpdateMobile, // 修改手机号
} from "@/api/person/index.js"

import {
    writeOffUserInfo, // 注销手机号
} from "@/api/user/index.js"

import { reactive, ref, getCurrentInstance, onMounted } from "vue"
import { getAuthorization, setAuthorization } from "@/utils/auth.js"
import { onLoad } from '@dcloudio/uni-app'
let { proxy } = getCurrentInstance()

const state = reactive({
    loginList: [
        {
            id: 1,
            name: "←",
            url: "/pages/login/mobileNumberLogin/index"
        }
    ],
    isText: true,
    show: true,
    verificationCodeList: [{
        id: 0,
        val: null
    }, {
        id: 1,
        val: null
    }, {
        id: 2,
        val: null
    }, {
        id: 3,
        val: null
    }, {
        id: 4,
        val: null
    }, {
        id: 5,
        val: null
    },],
    verificationCode: [],
    countdown: 0,
    types: 1,
    phoneNumber: "",
    updatePhoneNumber: "", // 修改后的手机号
})

onLoad((options) => {
    let { type, phoneNumber } = options
    // types 1 登录  2 修改密码 3 更换手机号 确认当前手机号 4 更换手机号 确认新手机号 5 注销账号
    state.types = type
    state.countdown = 60
    if (type != 3 || type != 5) {
        setTimeFn()
    }
    if (type == 1 || type == 3) {
        state.phoneNumber = getAuthorization("phoneNumber")
    }
    if (type == 2) {
        state.phoneNumber = phoneNumber
    }
    if (type == 4) {
        state.updatePhoneNumber = phoneNumber
    }
})

const getCode = async () => {
    try {
        state.isLoading = true
        let data = null
        if (state.types == 1) {
            data = await proxy.$get(checkCode + state.phoneNumber + '?codeType=0')
        }
        if (state.types == 2) {
            data = await proxy.$get(UpdateMobileNumberVerifyCode + state.phoneNumber + '?codeType=2')
        }
        if (state.types == 3 || state.types == 5) {
            data = await proxy.$get(UpdateBindMobile)
        }
        if (state.types == 4) {
            data = await proxy.$get(checkCode + state.updatePhoneNumber + '?codeType=1')
        }
        setAuthorization("codeKey", data.data)
    } catch (err) {
        state.isLoading = false
        uni.showToast({
            title: err.message,
            icon: "none",
        });
    }
}

const loginFn = (item) => {
    let { url } = item
    uni.navigateTo({
        url
    })
}

const verificationCodeFn = () => {
    state.verificationCodeList.forEach((o, i) => {
        o.val = state.verificationCode[i] ? state.verificationCode[i] : null
    })
}
import { AuthStateStore } from "@/store/authIndex.js"
let AuthStore = AuthStateStore()
const jump = async () => {
    setAuthorization('token', '')
    if (state.types == 1) {
        let params = {
            "phone": getAuthorization("phoneNumber"),
            "ClientCode": "Android",
            "ClientSecret": "AndroidClientSecrets",
            "codeValue": state.verificationCode.join(''),
            "codeKey": getAuthorization("codeKey"),
        }
        uni.showLoading({
            title: ''
        });
        let paramsLine = {
            "ip": "127.0.0.1",
            "mac": "E:BD:EA:7D:66:8"+new Date().getTime(),
            "devCode": "c7982d48-49b9-36bf-b049-ee13f1cd5c8f",
            "imei": "string",
            "appVersion": "1.0.0",
            "devModel": "string",
            "devBrand": "string"
        }
        try {
            let data = await proxy.$post(LoginSMS, params)
            if (data.code == 200) {
                let token = JSON.stringify(data.data.Token)
                let userInfo = JSON.stringify(data.data.UserInfo)
                setAuthorization("token", token)
                AuthStore.updateUserInfo(userInfo)
                setAuthorization("userId", data.data.UserInfo.ID)
                await proxy.$put(userOnLine, paramsLine)
                uni.hideLoading();
                if (data.code == 200) {
                    if (data.data.UserInfo.CityText == "") {
                        uni.navigateTo({
                            url: "/pages/register/index"
                        })
                    } else {
                        setAuthorization("active", 0)
                        uni.navigateTo({
                            url: "/pages/home/index"
                        })
                    }
                }

            }
        } catch (err) {
            uni.hideLoading();
            uni.showToast({
                title: err.message,
                icon: "none",
            });
        }
    }
    if (state.types == 2) {
        let params = {
            "codeValue": state.verificationCode.join(''),
            "codeKey": getAuthorization("codeKey"),
        }
        setAuthorization('passwordCodeValue', state.verificationCode.join(''))
        setAuthorization('passwordPhone', state.phoneNumber)
        try {
            let data = await proxy.$post(UpdateMobileNumberVerifyCode + state.phoneNumber, params)
            uni.navigateTo({
                url: '/pages/login/passwordNew/index'
            })
        } catch (err) {
            uni.hideLoading();
            uni.showToast({
                title: err.message,
                icon: "none",
            });
        }
    }
    // 修改手机号验证老手机号
    if (state.types == 3) {
        let params = {
            "codeValue": state.verificationCode.join(''),
            "codeKey": getAuthorization("codeKey"),
        }
        setAuthorization('passwordCodeValue', state.verificationCode.join(''))
        setAuthorization('passwordPhone', state.phoneNumber)
        try {
            let data = await proxy.$post(UpdateMobileCode, params)
            uni.navigateTo({
                url: '/pages/login/updateMobileNumber/index'
            })
        } catch (err) {
            uni.hideLoading();
            uni.showToast({
                title: err.message,
                icon: "none",
            });
        }

    }
    // 确认新手机号
    if (state.types == 4) {
        let params = {
            "codeValue": state.verificationCode.join(''),
            "codeKey": getAuthorization("codeKey"),
        }
        setAuthorization('passwordCodeValue', state.verificationCode.join(''))
        setAuthorization('passwordPhone', state.updatePhoneNumber)
        try {
            let data = await proxy.$put(UpdateMobile, params)
            uni.navigateTo({
                url: '/pages/home/index'
            })
        } catch (err) {
            uni.hideLoading();
            uni.showToast({
                title: err.message,
                icon: "none",
            });
        }
    }
    // 注销账号
    if (state.types == 5) {
        let params = {
            "offReasonID": getAuthorization("userId"),
            "codeValue": state.verificationCode.join(''),
            "codeKey": getAuthorization("codeKey"),
        }
        try {
            let data = await proxy.$post(writeOffUserInfo, params)
            localStorage.clear()
            uni.navigateTo({
                url: '/pages/login/mobileNumberLogin/index'
            })
        } catch (err) {
            uni.hideLoading();
            uni.showToast({
                title: err.message,
                icon: "none",
            });
        }
    }
}

const onInput = (val) => {
    if (state.verificationCode.length < 6) {
        state.verificationCode.push(val.toString())
    }
    verificationCodeFn()
    if (state.verificationCode.length == 6) {
        jump()
        return
    }
}
const onDelete = (val) => {
    if (state.verificationCode.length > 0) {
        state.verificationCode.splice(state.verificationCode.length - 1, 1)
        verificationCodeFn()
    }
}

let timer = ref(null)

const setTimeFn = () => {
    timer = setInterval(() => {
        state.countdown--
        if (state.countdown == 0) clearInterval(timer)
    }, 1000);
}

// 从新发送
const resendFn = () => {
    if (state.countdown > 0) {
        return
    }
    getCode()
    state.countdown = 60
    setTimeFn()
}


</script>

<style lang="scss" scoped>
.login-box {
    position: fixed;
    width: 100%;
    height: 100%;
}

.top-one-click-login-box {
    padding-top: 30rpx;
    display: flex;
    justify-content: space-between;
    font-size: 32rpx;
    color: #262626;
    margin: 0 60rpx;
    font-weight: 600;
    margin-bottom: 120rpx;
}

.mobile-number {
    margin: 30rpx 60rpx 30rpx 60rpx;
    display: flex;
    padding-bottom: 30rpx;
    justify-content: space-between;

    text {
        display: block;
        width: 80rpx;
        text-align: center;
        height: 90rpx;
        line-height: 90rpx;
        font-size: 48rpx;
        border-bottom: 2rpx solid #C6C6C6;
    }

}

.top-slogn-box {
    padding: 0 60rpx;
    font-size: 48rpx;
    text-align: left;
}

.top-logo-box {
    .logo-text {
        text-align: center;
        font-size: 40rpx;
        color: #5C5C5C;
    }

    .top-logo {
        display: flex;
        justify-content: center;
        padding-top: 314rpx;

        img {
            width: 312rpx;
            height: 104rpx;
        }
    }
}

.mobile-login-btn {
    font-size: 40rpx;
    margin-bottom: 10rpx;
    width: calc(100vw - 120rpx);
}

.top-send-box {
    font-size: 36rpx;
    color: #999999;
    margin: 40rpx 60rpx 20rpx 60rpx;
}

.verification-code {
    margin: 0 60rpx;
    font-size: 28rpx;
    color: #999999
}

.verification-code-color {
    color: #f00;
    margin-bottom: 15rpx;
}
</style>
